<template>
    <div class="defectiveRate zy-content">
        <div class="searchBox">
            <Form label-position="right" :label-width="130" class="search-form">
            <Row>
                <Col span="5">
                    <FormItem label="机种：">
                        <Select v-model="params.lotName" filterable remote   :placeholder="`${$t('common.selectInfo')}`">
                            <Option v-for="(item,index) in loNameList" :value="item" :key="index">{{ item }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="5">
                    <FormItem label="开始时间：">
                        <DatePicker v-model="params.startTime" type="date" split-panels :placeholder="`${$t('common.selectInfo')}`"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="5">
                    <FormItem label="结束时间：">
                        <DatePicker v-model="params.endTime"  type="date" split-panels :placeholder="`${$t('common.selectInfo')}`"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="4" align="center">
                    <Button type="primary" @click="getData" v-has="'devStandingFindList'">{{$t('common.Query')}}</Button>
                </Col>
            </Row>
            </Form>
        </div>
        <Row class="charts" :gutter="5">
            <Col :span="nextLevel ? 24 : 18" class="chart">
                <div class="chartContent">
                    <svg id="svg">
                        <defs>
                            <linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id='gradient1'>
                                <stop offset="0%" stop-color='#1dbf62'></stop>
                                <stop offset="100%" stop-color='#24de73'></stop>
                            </linearGradient>
                            <linearGradient x1="0%" y1="0%" x2="0%" y2="100%"  id='gradient2'>
                                <stop offset="0%" stop-color='#187bdb'></stop>
                                <stop offset="100%" stop-color='#28c5ff'></stop>
                            </linearGradient>
                            <linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id='gradient3'>
                                <stop offset="0%" stop-color='#e43816'></stop>
                                <stop offset="100%" stop-color='#ff6868'></stop>
                            </linearGradient>
                            <marker id="arrow" markerUnits="strokeWidth" markerWidth="30" markerHeight=30 viewBox="0 0 12 12" refX="6" refY="6" orient="auto">
                                <path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill: #f00;"></path>
                            </marker>
                        </defs>
                    </svg>
                    <div class="modalWrapper" v-show="show" :style="{ transform: `scale(${transform.k})  translate(${transform.x}px,${transform.y}px)`, top: `${position.top}px`, left: `${position.left}px`}">
                        <h3><span @click="show =- false">×</span></h3>
                        <modalcontent :modaldata="modaldata" />
                    </div>
                </div>
            </Col>
            <Col v-show="!nextLevel" span="6" class="lable">
                <rightInfo :list="treeData" />
            </Col>
        </Row>
    </div>
</template>

<script>
    import * as d3 from "d3";
    import modalcontent from './modalcontent'
    import rightInfo from './rightInfo'
    let moment = window.$this.moment;
    export default {
        name: "defectiveRate",
        data() {
            return {
                treeData: {},
                show: false,
                transform: {k: 1, y: 0,x: 0},
                position:{top: 0,left: 0},
                list: [],
                modaldata: [],
                nextLevel: false,
                params:{
                    lotName:'',
                    startTime:moment().subtract("days", 1).format("YYYY-MM-DD"),
                    endTime:moment().format("YYYY-MM-DD"),
                },
                loNameList:[],

            }
        },
        components: {modalcontent,rightInfo},
        mounted(){
            this.getLoNameList();
        },
        methods:{
            getLoNameList(){
                 this.axios({
                    method: 'get',
                    url: '/dms/devStanding/loNameList',
                    params: {

                    }
                }).then(res => {
                    if (res.code === 200) {
                        this.loNameList = res.data;
                        this.params.lotName = this.loNameList[1];
                        this.getData();
                    } else {
                        this.loNameList = [];
                        this.$Message.error(({content: res.msg, duration: 6, closable: true}));
                    }
                })
            },
            getData(){

                if(this.params.lotName === null || this.params.lotName === undefined || this.params.lotName === ''){
                    this.$Message.warning("查询机种不能为空");
                    return false;
                }
                if(this.params.startTime === null || this.params.startTime === undefined || this.params.startTime === ''){
                    this.$Message.warning("查询开始时间不能为空");
                        return false;
                }
                if(this.params.endTime === null || this.params.endTime === undefined || this.params.endTime === ''){
                    this.$Message.warning("查询结束时间不能为空");
                        return false;
                }

                if (this.params.startTime && this.params.endTime) {
                    if ( moment(this.params.endTime).isBefore( this.params.startTime)){
                        this.$Message.warning("点检开始时间不能大于点检结束时间!");
                        return false;
                    }

                }
                this.params.startTime = moment(this.params.startTime ).format('YYYY-MM-DD');
                this.params.endTime =  moment(this.params.endTime ).format('YYYY-MM-DD');
                this.axios({
                    method: 'get',
                    url: '/dms/devStanding/findList',
                    params: this.params
                }).then(res => {
                    if (res.code === 200) {
                        this.treeData = res.data;
                        this.init(this.treeData)
                    } else {

                        this.$Message.error(({content: res.msg, duration: 6, closable: true}));
                    }
                })
            },
            traverse(data){
                let nodes = [], edges = [];
                let index = 0;  //下标
                let total = 0;
                let maxItem = {};
                let badArr = [];
                let node1 = {
                    name: data.name,
                    level: 1,
                    num: data.num,
                    pencent: data.pencent,
                    children: data.children,
                    r: 60,
                    color: 'url(#gradient1)'
                };
                nodes.push(node1);
                function parseJson(_data, k, level) {
                    if(level > 3){
                        return
                    }
                    _data.children.filter((val) => {
                        index ++;
                        let levelIndex = level;
                        let node2 = {
                            name: val.name,
                            color: level === 2 ? 'url(#gradient2)' : 'url(#gradient3)' , //根据需求第三级改为红色
                            num: val.num,
                            pencent: val.pencent,
                            ids: val.ids || [],
                            children: val.children,
                            r: level === 2 ? 30 : 10,
                            level: level
                        };
                        nodes.push(node2);
                        if(levelIndex === 3){
                            badArr.push(node2);
                        }
                        let edge1 = {
                            source: k,
                            target: index
                        };
                        edges.push(edge1);
                        if(Number(val.num)> total){
                            total = Number(val.num);
                            maxItem = node2;
                        }
                        if((val.children instanceof Array) && val.children.length > 0) {
                            parseJson(val, index, ++levelIndex)
                        }
                    });
                }
                parseJson(data, 0, 2);
                badArr.sort(function (a, b) { return Number(b.num) - Number(a.num)});
                let topThree = badArr.slice(0,3);  // 不良率原因前三
                return {nodes,edges,topThree,maxItem}
            },
            init(data){
                if(Object.keys(data).length === 0){
                    d3.select('.svgContent').remove();
                    return false;
                }

                d3.select('.svgContent').remove();
                let {nodes,edges,topThree,maxItem} = this.traverse(data);
                let _this = this;
                let zoom = d3.zoom()
                    .scaleExtent([0.1, 10])  //缩放范围
                    .on("zoom", function zoomed(e) {
                        g.attr("transform", e.transform)
                    });

                let width = document.getElementById('svg').clientWidth;
                let height = document.getElementById('svg').clientHeight;
                let svg = d3.select('#svg').call(zoom);
                let g = svg.append('g').attr('class', 'svgContent');

                // 新建一个力导向图
                let forceSemulation = d3.forceSimulation()
                    .force('link', d3.forceLink())
                    .force('charge', d3.forceManyBody().strength(-500))
                    .force('center', d3.forceCenter())
                    // 碰撞力 防止节点重叠
                    .force('collide',d3.forceCollide().radius(50).iterations(2));

                // 画线
                let links = g.append('g')
                    .selectAll('line')
                    .data(edges)
                    .enter()
                    .append('line')
                    .attr('stroke', (d)=> d.target.name === maxItem.name ? 'url(#gradient3)' : '#ddd')
                    .attr('stroke-width',1);



                // 生成节点数据(初始化节点上数据)
                forceSemulation.nodes(nodes).on('tick', function () {
                    links.attr('x1',function (d) {return d.source.x})
                        .attr('y1',function (d) {return d.source.y})
                        .attr('x2',function (d) {return d.target.x})
                        .attr('y2',function (d) {return d.target.y});
                    linksText.attr('x',function (d) {
                        return (d.target.x + d.source.x) / 2})
                        .attr('y',function (d) {return (d.target.y + d.source.y) / 2});
                    gs.attr('transform', function(d){return 'translate(' + d.x + ',' + d.y + ')'})
                });
                //生成线数据
                forceSemulation.force('link').links(edges).distance(100);
                // 设置图形的中心位置
                forceSemulation.force('center').x(width/2).y(height/2);


                //画线上的关系描述
                let describeArr = edges.filter(item => item.bulianglv);
                let linksText = g.append('g')
                    .selectAll('text')
                    .data(describeArr)
                    .enter()
                    .append('text')
                    .attr('fill', '#187bdb')
                    .attr('font-weight', 'bold')
                    .text((d) =>d.bulianglv + '%');
                // 为节点和节点上的文字分组
                let gs = g.selectAll('circle')
                    .data(nodes)
                    .enter()
                    .append('g')
                    .attr('class', (d)=>{return 'gItem' + d.index + ' level' + d.level})
                    .attr('transform', function (d) {
                        return 'translate(' + d.x + ','+ d.y+')'
                    }).call(d3.drag()
                        .on('start', function (d) {
                            if(!d.active){
                                forceSemulation.alphaTarget(0.8).restart()
                            }
                            d.fx = d.x;
                            d.fy = d.y
                        })
                        .on('drag', function (d) {
                            d.fx = d.x;
                            d.fy = d.y;
                        })
                        .on('end', function (d) {
                            if(!d.active){
                                forceSemulation.alphaTarget(0)
                            }
                            d.fx = null;
                            d.fy = null
                        })
                    );

                // 绘制节点
                gs.append('circle')
                    .attr('class', (d)=>{return 'circleItem' + d.index})
                    .attr('r', (d)=> d.r)
                    .attr('fill', (d)=> d.name === maxItem.name ? 'url(#gradient2)' : d.color); //根据需求修改为绿色
                // 文字
                gs.append('text').attr('class', (d)=>'textLeve' + d.level)
                    .attr("pointer-events", "none")
                    .attr('text-anchor',(d)=> d.level === 3 ? 'end' : 'middle')
                    .attr('x',(d)=> d.level === 3 ? 15 : 0)
                    .attr('y',(d)=> d.level === 3 ? 24: d.level === 2 ? 45 : 80)
                    .attr('fill',(d)=> d.level === 3 ? '#666666' : '#333333')
                    .text((d)=> d.name);
                // 数量
                gs.append('text').attr('class', (d)=>'textNumLeve' + d.level)
                    .attr('text-anchor',(d)=> d.level === 3 ? 'start' : 'middle')
                    .attr('x',(d)=> d.level === 3 ? 20 : 0)
                    .attr('y',(d)=> d.level === 3 ? 24 : d.level === 2 ? 6 : 12)
                    .attr('fill',(d)=> d.level === 3 ? '#333' : '#fff')
                    .text((d)=> d.level !== 3 ? d.pencent + '%' : d.num);
                topThree.forEach((item, index)=>{
                    g.select('.circleItem' + item.index).attr('fill', 'url(#gradient3)');
                    g.select('.gItem' + item.index)
                        .attr('class',(d)=>{return 'sortTopItemG level' + d.level})
                        .append("text")
                        .attr('class', 'sortTop')
                        .attr('y', 4)
                        .attr('text-anchor','middle')
                        .attr('fill', '#fff')
                        .text(()=>{return index + 1})
                });
                // 绘制鼠标hover的外圆
                // let piedata=d3.pie();  //将dataset转化为能被用元表示的数组
                // d3.selectAll('.sortTopItemG').on('mouseover', function (item) {
                //     let nodeList  = d3.select(this).selectAll('.hoverItem')._groups[0];
                //     if(nodeList.length === 0){
                //         d3.selectAll('.hoverItem').remove();
                //         let insideArc = d3.arc().outerRadius(item.r + 5).innerRadius(item.r);
                //         let outsideArc = d3.arc().outerRadius(item.r + 35).innerRadius(item.r + 4).padAngle(0.02);
                //         let hoverG = d3.select(this).append("g").attr('class', 'hoverItem').on('mouseout', function () {
                //             d3.select(this).remove();
                //         });
                //         hoverG.append('g').attr('class', 'insideArc');
                //         hoverG.append('g').attr('class', 'outsideArc');
                //         d3.select('.insideArc').selectAll('path')   // 内圈弧
                //             .data(piedata([1,1]))
                //             .enter()
                //             .append("path")
                //             .attr("pointer-events", "none")
                //             .attr("fill", '#FAEDCD')
                //             .attr("d", insideArc);//为这个组的弧形s定义颜色与角度

                //         let btns = piedata([1, 1,1]);
                //         btns[0].name = item.num;
                //         btns[1].name = '追溯';
                //         btns[2].name = item.pencent + '%';

                //         let Arcs = d3.select('.outsideArc').selectAll('g')
                //             .data(btns)
                //             .enter()
                //             .append("g");
                //         Arcs.append("path")
                //             .attr("fill", '#D2D5DA')
                //             .attr("d", outsideArc)
                //             .on('click', function () {
                //                 _this.show = false;
                //                 _this.nextLevel = true;
                //                 _this.initnext(item)
                //             });

                //         Arcs.append("text")
                //             .attr("transform",function(d){
                //                 let str = '';
                //                 let arr = outsideArc.centroid(d);
                //                 if(d.index === 0){
                //                     arr[0] =  arr[0] - 8;
                //                     arr[1] =  arr[1] + 5;
                //                     str = "translate("+ arr +") rotate(60)"
                //                 } else if (d.index === 1) {
                //                     str = "translate("+ arr +")"
                //                 } else {
                //                     arr[0] =  arr[0] + 10;
                //                     arr[1] =  arr[1] + 5;
                //                     str = "translate("+ arr +") rotate(-60)"
                //                 }
                //                 return str
                //             })
                //             .attr("text-anchor","middle")
                //             .attr("fill",'url(#gradient2)')
                //             .attr("font-size","14px")
                //             .attr("pointer-events", "none")
                //             .text(function(d){
                //                 return d.name;
                //             });
                //     }
                // })
                //     .on('mouseout', function () {
                //     console.log('99')
                //     d3.selectAll('.hoverItem').remove();
                // });
            },
            filterData(data, group){
                let result = '';
                function recursion(arr, val) {
                    if(result){ // 减少无用的循环
                        return
                    }
                    for(let item of arr.children){
                        if(result){  // 减少无用的循环
                            break
                        }
                        if(item.name === val.name){
                            result = arr;
                            break;
                        }
                        if((item.children instanceof Array) && item.children.length > 0) {
                            recursion(item, val)
                        }
                    }
                }
                recursion(data, group)
                return result;
            },
            initnext(data){
                d3.select('.svgContent').remove();
                let {nodes,edges,topThree,maxItem} = this.traverse(data);
                let node1 = this.filterData(this.treeData, nodes[0]);
                let node0 = this.filterData(this.treeData, node1);
                node0 = {
                    ...node0,
                    level: 0,
                    r: 70,
                    root: true,
                    color: 'url(#gradient1)'
                };
                nodes.push(node0);
                let lenth = nodes.length;
                let edge1 = {
                    source: lenth - 1,
                    target: 0,
                    bulianglv: '返回'
                };
                edges.push(edge1);

                let _this = this;
                let zoom = d3.zoom()
                    .scaleExtent([1, 1])  //缩放范围
                    .on("zoom", function(e) {
                        _this.transform = e.transform;
                        g.attr("transform", e.transform)
                    });

                let width = document.getElementById('svg').clientWidth;
                let height = document.getElementById('svg').clientHeight;
                let svg = d3.select('#svg').call(zoom);

                let g = svg.append('g').attr('class', 'svgContent');
                // 新建一个力导向图
                let forceSemulation = d3.forceSimulation()
                    .force('link', d3.forceLink())
                    .force('charge', d3.forceManyBody().strength(-500))
                    .force('center', d3.forceCenter())
                    // 碰撞力 防止节点重叠
                    .force('collide',d3.forceCollide().radius(50).iterations(2));
                // 生成节点数据(初始化节点上数据)
                forceSemulation.nodes(nodes).on('tick', function () {
                    links.attr('x1',function (d) {return d.source.x})
                        .attr('y1',function (d) {return d.source.y})
                        .attr('x2',function (d) {return d.target.x})
                        .attr('y2',function (d) {return d.target.y});
                    linksText.attr('x',function (d) {
                        return (d.target.x + d.source.x) / 2})
                        .attr('y',function (d) {return (d.target.y + d.source.y) / 2});
                    gs.attr('transform', function(d){return 'translate(' + d.x + ',' + d.y + ')'})
                });
                //生成线数据
                forceSemulation.force('link').links(edges).distance((d)=> {return d.bulianglv ? 300 : 100});
                // 设置图形的中心位置
                forceSemulation.force('center').x(width/2).y(height/2);
                // 画线
                let links = g.append('g')
                    .selectAll('line')
                    .data(edges)
                    .enter()
                    .append('line')
                    .attr('stroke', (d)=> d.target.name === maxItem.name ? 'url(#gradient3)' : d.bulianglv ? 'url(#gradient1)':  '#ddd')
                    .attr('stroke-width',1)
                    .attr("marker-mid","url(#arrow)")
                    .attr("marker-start","url(#arrow)");
                //画线上的关系描述
                let describeArr = edges.filter(item => item.bulianglv);
                let linksText = g.append('g')
                    .selectAll('text')
                    .data(describeArr)
                    .enter()
                    .append('text')
                    .attr('fill', '#FF8700')
                    .attr('font-weight', 'bold')
                    .text((d) =>d.bulianglv)
                    .on('click', function () {
                        _this.nextLevel = false;
                        _this.show = false;
                        _this.init(_this.treeData)
                    });

                // 为节点和节点上的文字分组
                let gs = g.selectAll('circle')
                    .data(nodes)
                    .enter()
                    .append('g')
                    .attr('class', (d)=>{
                        return d.root ? 'gItem' + d.index + ' level' + d.level + ' rootCircle' : 'gItem' + d.index + ' level' + d.level;
                    })
                    .attr('transform', function (d) {
                        return 'translate(' + d.x + ','+ d.y+')'
                    }).call(d3.drag()
                        .on('start', function (d) {
                            if(!d.active){
                                forceSemulation.alphaTarget(0.8).restart()
                            }
                            d.fx = d.x;
                            d.fy = d.y
                        })
                        .on('drag', function (d) {
                            d.fx = d.x;
                            d.fy = d.y;
                        })
                        .on('end', function (d) {
                            if(!d.active){
                                forceSemulation.alphaTarget(0)
                            }
                            d.fx = null;
                            d.fy = null
                        })
                    );

                // 绘制节点
                gs.append('circle')
                    .attr('class', (d)=>{return 'circleItem' + d.index})
                    .attr('r', (d)=> d.r)
                    .attr('fill', (d)=> d.name === maxItem.name ? 'url(#gradient3)' : d.color);
                // 文字
                gs.append('text').attr('class', (d)=>'textLeve' + d.level)
                    .attr("pointer-events", "none")
                    .attr('text-anchor',(d)=> d.level === 3 ? 'end' : 'middle')
                    .attr('x',(d)=> d.level === 3 ? 15 : 0)
                    .attr('y',(d)=> d.level === 3 ? 24: d.level === 2 ? 45 : d.level === 0 ? 90 : 80)
                    .attr('fill',(d)=> d.level === 3 ? '#666666' : '#333333')
                    .text((d)=> d.name);
                // 数量
                gs.append('text').attr('class', (d)=>'textNumLeve' + d.level)
                    .attr('text-anchor',(d)=> d.level === 3 ? 'start' : 'middle')
                    .attr('x',(d)=> d.level === 3 ? 20 : 0)
                    .attr('y',(d)=> d.level === 3 ? 24 : d.level === 2 ? 6 : d.level === 0 ? -30 : 12)
                    .attr('fill',(d)=> d.level === 3 ? '#333' : '#fff')
                    .text((d)=> d.level !== 3 ? d.pencent + '%' : d.num);
                topThree.forEach((item, index)=>{
                    g.select('.circleItem' + item.index).attr('fill', 'url(#gradient3)');
                    g.select('.gItem' + item.index)
                        .attr('class',(d)=>{return 'sortTopItemG level' + d.level})
                        .append("text")
                        .attr('class', 'sortTop')
                        .attr('y', 4)
                        .attr('text-anchor','middle')
                        .attr('fill', '#fff')
                        .text(()=>{return index + 1})
                });

                // 需求要求特殊处理第一个
                d3.select('.rootCircle')
                    .append('circle')
                    .attr('r', 40)
                    .attr('transform', 'translate(0 25)')
                    .attr('fill', '#FF8700');
                d3.select('.rootCircle')
                    .append('text')
                    .attr('x', 0)
                    .attr('y', 45)
                    .attr('class', 'textLeve2')
                    .attr('text-anchor', 'middle')
                    .attr('fill', '#fff')
                    .text(node1.name);
                d3.select('.rootCircle')
                    .append('text')
                    .attr('x', 0)
                    .attr('y', 25)
                    .attr('class', 'textNumLeve0')
                    .attr('text-anchor', 'middle')
                    .attr('fill', '#fff')
                    .text(node1.num);


                // 绘制鼠标hover的外圆
                let piedata=d3.pie();  //将dataset转化为能被用元表示的数组
                d3.selectAll('.level3').on('mouseover', function (item) {
                    let nodeList  = d3.select(this).selectAll('.hoverItem')._groups[0];
                    if(nodeList.length === 0){
                        let insideArc = d3.arc().outerRadius(item.r + 5).innerRadius(item.r);
                        let outsideArc = d3.arc().outerRadius(item.r + 35).innerRadius(item.r + 4).padAngle(0.02);
                        let hoverG = d3.select(this).append("g").attr('class', 'hoverItem').on('mouseout', function () {
                            d3.select(this).remove();
                        });
                        hoverG.append('g').attr('class', 'insideArc');
                        hoverG.append('g').attr('class', 'outsideArc');
                        d3.select('.insideArc').selectAll('path')   // 内圈弧
                            .data(piedata([1,1]))
                            .enter()
                            .append("path")
                            .attr("pointer-events", "none")
                            .attr("fill", '#FAEDCD')
                            .attr("d", insideArc);//为这个组的弧形s定义颜色与角度

                        let btns = piedata([1, 1,1]);
                        btns[0].name = item.num;
                        btns[1].name = '详情';
                        btns[2].name = item.pencent + '%';
                        btns[0].ids = item.ids;
                        btns[1].ids = item.ids;
                        btns[2].ids = item.ids;
                        let Arcs = d3.select('.outsideArc').selectAll('g')
                            .data(btns)
                            .enter()
                            .append("g");
                        Arcs.append("path")
                            .attr("fill", '#D2D5DA')
                            .attr("d", outsideArc)
                            .on('click', function (d) {
                                _this.position = {
                                    top: d.offsetY,
                                    left: d.offsetX,
                                };
                                _this.transform = {
                                    k: 1,
                                    x: 0,
                                    y: 0
                                };
                                _this.listChange(d.ids);
                            });

                        Arcs.append("text")
                            .attr("transform",function(d){
                                let str = '';
                                let arr = outsideArc.centroid(d);
                                if(d.index === 0){
                                    arr[0] =  arr[0] - 8;
                                    arr[1] =  arr[1] + 5;
                                    str = "translate("+ arr +") rotate(60)"
                                } else if (d.index === 1) {
                                    str = "translate("+ arr +")"
                                } else {
                                    arr[0] =  arr[0] + 10;
                                    arr[1] =  arr[1] + 5;
                                    str = "translate("+ arr +") rotate(-60)"
                                }
                                return str
                            })
                            .attr("text-anchor","middle")
                            .attr("fill",'url(#gradient2)')
                            .attr("font-size","14px")
                            .attr("pointer-events", "none")
                            .text(function(d){
                                return d.name;
                            });
                    }
                });
            },
            listChange(arr){
                let modaldata= [];
                this.list.filter(item => {
                    if(arr.indexOf(item.detailId) > -1){
                        let num = item.num;
                        for(let i = 0; i < num; i++){
                            item.num = 1;
                            modaldata.push(item)
                        }
                    }
                });
                this.modaldata = modaldata;
                this.show = true;
            }
        }
    }
</script>

<style lang="scss">
    .defectiveRate{

        .searchSwapper {
            margin-top: 10px;
            margin-bottom: 10px;
            background-color: #fff;
            height: 60px;
            line-height: 60px;
        }
        .searchSwapper {
            .ivu-input {
                border: 1px solid #dcdee2;
            }

            .ivu-date-picker {
                display: inline-block !important;
                width: 100%;
            }
        }
        width: 100%;
        height: 800px;
        user-select: none;
        -webket-user-select: none;
        -moz-user-select: none;
        font-family: MicrosoftYaHe;
        .chartContent{
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #svg{
            width: 100%;
            height: 100%;
            cursor: pointer;
            z-index: 1;
        }
        .textLeve0{
            font-size: 16px;
            color: #333333;
            font-weight: bold;
        }
        .textLeve1{
            font-size: 16px;
            color: #333333;
            font-weight: bold;
        }
        .textLeve2{
            font-size: 14px;
            color: #333333;
            font-weight: bold;
        }
        .textLeve3{
            font-size: 12px;
            color: #666666;
        }
        .textNumLeve0{
            color: #ffffff;
            font-size: 24px;
            font-weight: bold;
        }
        .textNumLeve1{
            color: #ffffff;
            font-size: 24px;
            font-weight: bold;
        }
        .textNumLeve2{
            color: #ffffff;
            font-size: 14px;
            font-weight: bold;
        }
        .textNumLeve3{
            color: #333333;
            font-size: 14px;
            font-weight: bold;
        }
        .sortTop{
            font-size: 14px;
        }
        .modalWrapper{
            position: absolute;
            left: 20%;
            top: 50px;
            width: 1000px;
            background: #fff;
            z-index: 2;
            border-radius: 3px;
            box-shadow: 0 0 20px #cccccc;
            h3{
                height: 30px;
                line-height: 30px;
                border-bottom: 1px solid #dddddd;
                span{
                    float: right;
                    font-size: 20px;
                    color: #999999;
                    width: 30px;
                    height: 30px;
                    cursor: pointer;
                    text-align: center;
                    line-height: 30px;
                }
            }
        }

        .charts{
            height: 750px;
            overflow: hidden;
            margin: 10px 20px;
            .chart{
                height: 750px;
                display: inline-block;
                box-shadow: -4px 0px 10px 0px rgba(139, 139, 139, 0.1);
                background: #fff;
            }
        }
    }
</style>
